<template>
  <div class="classPage">
    <van-search v-model="inputVal" placeholder="请输入搜索关键词" @search="search"/>
    <div class="content">
      <!-- <van-sidebar v-model="active" @change="cut">
        <van-sidebar-item title="所有分类" />
        <van-sidebar-item
          :title="item.name"
          v-for="(item, index) in bigList"
          :key="index"
        />
      </van-sidebar> -->
      <van-sidebar v-model="active">
        <van-sidebar-item title="所有分类" />
        <van-sidebar-item
          :title="item.name"
          v-for="(item, index) in bigList"
          :key="index"
        />
      </van-sidebar>
      <div class="right">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../assets/img/jingtian.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/tangyan.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yifei.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yuanyuan.jpeg" alt="" />
          </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="3">
          <van-grid-item v-for="(item,index) in showList" :key="index" :icon="item.icon" :text="item.name" @click="$router.push(`/classifyxq/${item.id}`)"/>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs,watch } from "vue";
import { getAll } from "../../api/home/index.js";
export default {
  setup(props) {
    const data = reactive({
      inputVal: "", // 搜索框的值
      active: 0,
      allList: [], // 所有的数据
      bigList: [], // 大分类的数据
      showList: [], // 展示的二级数据
    });
    getAll().then((res) => {
      data.allList = res.data;
      data.bigList = res.data.filter((item) => item.level == 1);
      data.showList = res.data.filter((item) => item.level == 2);
    });
   //  const num = ref(10);
   //  setTimeout(() => {
   //     num.value = 20
   //  }, 1000);
    // 第一个参数 是要监听元素 
    // 第二个是监听函数
    // 第三参数，配置选项
   //  特别注意：watch 监听在监听 reactive 声明的对象的时候，第一个参数应该是一个函数
    watch(() => data.active,(newVal,oldVal)=>{
      //   console.log(newVal);
      //   console.log(oldVal);
      if (newVal == 0){
         data.showList = data.allList.filter((item) => item.level == 2);
      } else {
         let id = data.bigList[newVal-1].id;
         data.showList = data.allList.filter(item => item.pid == id);
      }
    },{
       deep: true
    })
   //  const cut = (i) => { // 切换侧边栏触发的函数
   //    if (i == 0){
   //       data.showList = data.allList.filter((item) => item.level == 2);
   //    } else {
   //       let id = data.bigList[i-1].id;
   //       data.showList = data.allList.filter(item => item.pid == id);
   //    }
   //  }

    const search = (val) => {
       data.showList = data.allList.filter(item => item.level == 2 && item.name.includes(val));
    }
    return {
      ...toRefs(data),
      // cut,
      search
    };
  },
};
</script>

<style lang="scss" scoped>
.classPage {
  .content {
    display: flex;
    height: calc(100% - 54px);
    .right {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      img {
        width: 100%;
        height: 196px;
      }
    }
    .van-sidebar {
      background: #f7f8fa;
    }
  }
}
</style>
